<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Largest Contentful Paint: largest image is reported.</title>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/largest-contentful-paint-helpers.js"></script>
<!-- There is some text and some images. We care about blue.png being reported, as it is the largest. -->
<p>This is some text! :)</p>
<img src='/images/red.png' id='red'/>
<img src='/images/blue.png' id='blue'/>
<img src='/images/black-rectangle.png' id='black'/>
<p>More text!</p>
<script>
  async_test(function (t) {
    assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
    const beforeLoad = performance.now();
    const observer = new PerformanceObserver(
      t.step_func(entryList => {
        entryList.getEntries().forEach(entry => {
          // The text or other image could be reported as LCP if it is rendered before the blue image.
          if (entry.id !== 'blue')
            return;

          const url = window.location.origin + '/images/blue.png';
          // blue.png is 133 by 106.
          const size = 133 * 106;
          checkImage(entry, url, 'blue', size, beforeLoad);
          t.done();
        })
      })
    );
    observer.observe({type: 'largest-contentful-paint', buffered: true});
  }, 'Largest Contentful Paint: largest image is reported.');
</script>
</body>
